<template>
  <view class="home">
    <!--  轮播图 -->
    <view class="swiper">
      <u-swiper
        indicator
        indicatorMode="dot"
        height="254"
        radius="0"
        :list="swiperList"
		@click="swiperClick"
      ></u-swiper>
    </view>
    <!-- 用户登录信息 -->
    <view class="user space-between" v-if="userInfo && userInfo.nickname">
      <view class="user-info row">
        <view class="info-avatar">
          <image :src="userInfo.avatar" mode="aspectFill" />
        </view>
        <view class="info-text">
          <view class="info-name">{{userInfo.nickname}}</view>
          <view class="info-id center">ID：<text style="font-size: 28rpx;">{{userInfo.idcode}}</text> 
			<image class="copy-btn" @click="$utils.copyMessage(userInfo.idcode)" src="@/static/icon/copy-icon.png" mode="aspectFill"></image>
		  </view>
        </view>
      </view>
      <view
        class="user-btn row"
        @click="$uniApi.to('/pages/home/packagePrediction')"
      >
        <view class="btn-img">
          <image src="/static/icon/notice.png" mode="aspectFill" />
        </view>
        <view class="btn-text">预报包裹</view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="menu">
      <u-grid :border="false" col="5">
        <u-grid-item
          v-for="(listItem, listIndex) in menuList"
          :key="listItem.id"
          @click="$uniApi.to(listItem.url)"
        >
          <u-image :src="listItem.pic" width="90rpx" height="90rpx"></u-image>
          <u-badge
            :show="listItem.count > 0 && listItem.name!='已下单包裹'"
            :offset="[0, 10]"
            :absolute="true"
            :value="listItem.count"
            type="error"
            showZero
          ></u-badge>
          <text class="grid-text">{{ listItem.name }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 列表 -->
    <view class="line">
      <view class="line-top">
        <view
          class="box left space-between"
          @click="$uniApi.to('/pages/home/packagePrediction')"
        >
          <view class="text">
            <view class="title">
              <text>包裹</text>
              <text class="textblue">预报</text>
            </view>
            <view class="english">Forecast</view>
          </view>
          <view class="img">
            <image src="/static/icon/calendar.png" mode="aspectFill" />
          </view>
        </view>
        <view
          class="box right space-between"
          @click="$uniApi.to('/pages/my/balance')"
        >
          <view class="text">
            <view class="title">
              <text>我的</text>
              <text class="textblue">财务</text>
            </view>
            <view class="english">My balance</view>
          </view>
          <view class="img">
            <image src="/static/icon/pay.png" mode="aspectFill" />
          </view>
        </view>
      </view>
      <view class="line-top bottom">
        <view
          class="box left space-between"
          @click="$uniApi.to('/pages/home/noArrived?current=4')"
        >
          <view class="text">
            <view class="title">
              <text>公共区待</text>
              <text class="textblue">认领</text>
              <text>包裹</text>
            </view>
            <view class="english">To receive</view>
          </view>
          <view class="img">
            <image src="/static/icon/package.png" mode="aspectFill" />
			<u-badge
			  :show="notClaimNum> 0"
			  :offset="[-10, -10]"
			  :absolute="true"
			  :value="notClaimNum"
			  type="error"
			  showZero
			></u-badge>
          </view>
        </view>
        <view
          class="box right space-between"
          @click="$uniApi.to('/pages/home/address')"
        >
          <view class="text">
            <view class="title">
              <text>中国深圳</text>
              <text class="textblue">仓库地址</text>
            </view>
            <view class="english">Shenzhen Warehouse Site</view>
          </view>
          <view class="img">
            <image src="/static/icon/address.png" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <view class="kefu">
      <view class="kbox" @click="$uniApi.to('/pages/my/about')">
        <image :src="icon?icon:'/static/icon/kefu.png'" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
export default {
  data() {
    return {
      swiperList: [],
      menuList: [],
	  swiperListData:[],
	  icon:'',
	  notClaimNum:0
	  // userInfo:{}
    };
  },
  onLoad(options) {
	  console.log(options,"options")
	  if(options.scene){
		  uni.setStorageSync('spid',options.scene)
	  }else{
		  uni.removeStorageSync('spid');
	  }
	  if(options.ppid){
	  		uni.setStorageSync('ppid',options.ppid)
	  }else{
	  		uni.removeStorageSync('ppid');
	  }
	  this.getIcon()
  },
  computed: {
  	...mapState(['userInfo'])
  },
  onShow(){
	 // this.userInfo = uni.getStorageSync("userInfo")||{};
	 
	 // this.userInfo = this.$store.state.userInfo
	 console.log('123', this.userInfo)
	 this.getInitData();
	 this.getOrderNum();
	 console.log(uni.getStorageSync("userInfo"),"uni.getStorageSync(userInfo)11");
  },
  methods: {
	  getOrderNum(){
	  	this.$api.post({
	  		url: "/ebapi/public_api/reservation_order_count",
	  		success: (res) => {
				this.notClaimNum = res[4] || 0;
	  		},
	  	 })
	  },
	  // 获取联系手机号
	  getIcon() {
	  	this.$api.post({
	  		url: "/ebapi/public_api/connection",
	  		data: {},
	  		success: (res) => {
	  			this.icon = res.icon;
	  		},
	  	})
	  },
	  getInitData(){
		this.$api.post({
		    url: "/ebapi/public_api/indexInfo",
		    data: {},
		    success: (res) => {
				this.swiperList = res.banner && res.banner.map(item=>item.pic);
				this.menuList = res.menus || [];
				this.swiperListData = res.banner;
				console.log(res,"res 首页数据")
			},
		 })
	  },
	  swiperClick(index){
		  console.log(this.swiperListData[index],"index")
	  }
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
  background-color: #ffffff;
}

.home {
  width: 750rpx;
  padding-bottom:30rpx ;
  image {
    width: 100%;
    height: 100%;
  }

  .swiper {
    width: 100%;
    height: 508rpx;
  }

  .user {
    width: 702rpx;
    height: 160rpx;
    background: #ffffff;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 24rpx;
    opacity: 1;
    margin: 0 auto;
    padding: 39rpx 45rpx;
    margin-top: -30rpx;
    position: relative;
    z-index: 1;

    .user-info {
      .info-avatar {
        width: 82rpx;
        height: 82rpx;
        border-radius: 50%;

        image {
          border-radius: 50%;
        }
      }

      .info-text {
        padding-left: 24rpx;

        .info-id {
          margin-top: 7rpx;
          color: $uni-text-color-grey;
        }
      }
    }
    .user-btn {
      padding: 20rpx 25rpx;
      border-radius: 10rpx;
      background: $uni-color-main;
      color: $uni-text-color-inverse;
      opacity: 1;

      .btn-img {
        width: 33rpx;
        height: 33rpx;
      }

      .btn-text {
        margin-left: 14rpx;
      }
    }
  }

  .menu {
    margin: 40rpx 0;

    .grid-text {
      margin: 7rpx 0 20rpx;
      font-size: 26rpx;
    }
  }

  .line {
    width: 100%;
    padding: 0 24rpx;

    .line-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .bottom {
      margin-top: 24rpx;
    }

    .left {
      flex: 1;
      margin-right: 24rpx;
    }

    .right {
      flex: 1;
    }

    .box {
      width: 339rpx;
      height: 129rpx;
      padding: 0 20rpx;
      background: $uni-bg-color-box;
      border-radius: 22rpx;
      opacity: 1;

      .text {
        font-size: $uni-text-size-middle;

        .textblue {
          color: $uni-color-main;
        }
        .english {
          font-size: 24rpx;
          color: $uni-text-color-grey;
          margin-top: 10rpx;
        }
      }

      .img {
		position: relative;
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .kefu {
    display: flex;
    justify-content: flex-end;
    margin: 30rpx;
	position: fixed; top: 80%; right: 0;
    .kbox {
      width: 92rpx;
      height: 92rpx;
      position: sticky;
      bottom: 30rpx;
    }
  }
}
</style>
